<template>
  <div class="order-express">
    <p v-if="+item.is_express === 0">拼团没未中奖,不用发货</p>
<!--    <p v-else-if="/*+order.status === order.PAID &&*/ !item.logistics">-->
<!--      待发货,-->
<!--      <el-button type="primary" size="small" class="ops" @click="openExpress">发货操作</el-button>-->
<!--    </p>-->
    <p v-else-if="+order.status >= status.WAIT_RECEIVING && +order.status !== status.CANCEL">{{ item.logistics | expressText }}</p>
    <p v-else-if="/*+order.status === order.PAID &&*/ !item.logistics">
      待发货,
    </p>
    <p>
      <el-button type="primary" size="small" class="ops" @click="openExpress">发货操作</el-button>
    </p>
    <el-dialog
      title="填写物流信息"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
        <el-select
          v-model="postForm.company_id"
          placeholder="快递公司"
          clearable
          class="filter-item"
        >
          <el-option
            v-for="item in logistics"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <br />
        <br />
        <el-input v-model="postForm.express_sn" placeholder="快递单号" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveExpress">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import config from '@/config'
export default {
  name: 'OrderExpress',
  props: ['order', 'item', 'logistics'],
  data() {
    return {
      dialogVisible: false,
      postForm: {},
      status: config.order
    }
  },
  filters: {
    expressText(v) {
      // if (this.order.status <= this.status.WAIT_RECEIVING) {
      //   return ''
      // }
      return `已发货: ${v.company.name}, 单号: ${v.express_sn}`
    }
  },
  methods: {
    // open express
    openExpress() {
      this.dialogVisible = true
    },
    // save to db
    saveExpress() {
      if (!this.postForm.company_id || this.postForm.company_id <= 0) {
        return this.$message.warning('请选择快递公司')
      }
      if (!this.postForm.express_sn || this.postForm.express_sn.length === 0) {
        return this.$message.warning('请填写单号')
      }
      // request api
      api.order.saveExpress({
        ...this.postForm,
        order_id: this.order.id,
        order_item_id: this.item.id,
        user_address_id: this.order.user_address
      }).then(response => {
        this.$message.success('操作成功')
        // clear
        this.postForm = {}
        this.dialogVisible = false
        // status
        this.$set(this.item, 'logistics', response.data.logistics)
        this.$set(this.order, 'status', response.data.order_status)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.order-express {
  min-height: 35px;
  //background: red;
  color: #999;

  // ops
  .ops {
  }
}
</style>
